<template>
  <div class="container">
    <van-nav-bar
  title=""
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
   <div class="item1" v-for="(item,i) in item1"  :key="i">
     <van-collapse v-model="activeNames1"  >
  <van-collapse-item  :border="false" :name="i+1" size="large" >
    <template #title>
      <div class="title1">
     <div class="cnt">
       <div class="title">
            {{item.kind}}  <van-icon name="question-o" style="color:orange"/>
       </div>
       <div class="desc">
         共1899道题 | 已练习233道
       </div>
     </div>

      </div>
    </template>

    <div class="item2" v-for="(item1,i1) in item.item1" :key="i1">
      <van-collapse v-model="activeNames2" >
  <van-collapse-item :name="i1+11">
    <template #title>
      <div class="title2"><van-icon name="list-switch" style="transform:translateY(3px)" />  {{item1.kind}}</div>
    </template>

    <div class="item3" v-for="(item2,i2 ) in item1.label" @click="go" :key="i2">
<div class="tag" :style="color[i2]"> {{item2}} </div> <div style="text-indent:1em">1234道｜已答对12道</div>

    </div>
  </van-collapse-item>

</van-collapse>
    </div>
  </van-collapse-item>

</van-collapse>

   </div>

  </div>
</template>

<script setup>
import {ref,reactive} from 'vue';
 const onClickLeft = () => history.back();
 import {useRouter} from "vue-router";
const router= useRouter()
const go = ()=>{
  router.push("/test")

}
  const activeNames1 = ref(['1']);
    const activeNames2 = ref(['11']);
      const activeNames = ref(['111']);
const item1 = reactive([
  {
    "kind":"数据结构",

    "item1":[{
      "id":"item20",
      "kind":"prim",
      "label":["简单","中等","智能","困难"]
    },
    {
      "id":"item21",
      "kind":"prim",
      "label":["简单","中等","智能","困难"]
    }]
  },
   {
    "kind":"数据结构",

    "item1":[{
      "id":"item20",
      "kind":"prim",
      "label":["简单","中等","智能","困难"]
    }]
  },
  {
    "kind": "数据结构",

    "item1": [{
      "id": "item20",
      "kind": "prim",
      "label": ["简单", "中等", "智能", "困难"]
    }]
  }
])
const color  = reactive([
  {
    color:"#069f06",
    backgroundColor:"#e0ffec",

  },
  {
    color:"#5b9cf8",
    backgroundColor:"#eef5fe"
  },
  {
    color:"#e1b066",
    backgroundColor:"#fcf6ed"
  },
  {
     color:"#e47470",
    backgroundColor:"#fcf0f0"
  }
])
</script>

<style scoped lang="less">
.container{
  .tag{

    border-radius: 7px;
   margin:6px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    width: 50px;
    //background-color: #eef5fe #fcf0f0
    background-color:#fcf6ed;
  }
  border: 1px solid transparent;
  background-color: #f1f3f4;
  height: 100vh;
  .item1{
       border: 1px solid #eee;

      box-shadow: 0 0 10px #ddd;
    width: 90%;
    .item3{
      border-radius: 5px;
      height: 70px;
      justify-content: space-around;
       background-color:#F2F6FC;
      margin-bottom: 10px;
      padding:5px;
    text-align: start;
      //  font-weight: bold;
      //  font-size: 16px;
      //color:#606266;
    }
    .title2{
       text-align: start;
        font-weight: bold;
        font-size: 16px;
      color:#606266;

    }
   margin:10px auto;
    .title1
    {
      display: flex;
      flex-direction: row;
      align-items: center;
      .title
      {
        text-align: start;
        color:black;
        font-weight: bold;
        font-size: 16px;


      }  .desc{
          color:#C0C4CC;
      font-size: 14px;
        }

    }
  }
}
</style>
